// Label Template Creator
$(document).ready(function() {
    // 如果是在编辑模式下，显示保存和预览按钮
    var isEditMode = document.getElementById('templateId') !== null;
    if (isEditMode) {
        $('#previewBtn, #saveBtn').show();
    }

    // 初始化模板动作
    function initializeTemplateActions() {
        // 确保Bootstrap的JavaScript已加载
        if (typeof bootstrap !== 'undefined') {
            // 初始化工具提示
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // 初始化模态框
            var modalElement = document.getElementById('createTemplateModal');
            if (modalElement) {
                modalElement.addEventListener('hidden.bs.modal', function () {
                    // 重置表单和错误信息
                    $('#createTemplateForm')[0].reset();
                    $('#templateFormErrors').hide().empty();
                });
            }
        }

        // 确保标签管理脚本已加载
        if (typeof window.initializeLabelTemplates === 'function') {
            window.initializeLabelTemplates();
        }
    }

    // 页面加载时初始化动作
    initializeTemplateActions();

    // 处理表单提交
    $('#createTemplateForm').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        const submitBtn = form.find('button[type="submit"]');
        const originalBtnText = submitBtn.html();
        const modal = bootstrap.Modal.getInstance(document.getElementById('createTemplateModal'));
        
        // 显示加载状态
        submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 创建中...');
        submitBtn.prop('disabled', true);
        
        // 隐藏之前的错误信息
        $('#templateFormErrors').hide().empty();
        
        // 发送AJAX请求
        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: form.serialize(),
            success: function(response) {
                // 关闭模态框
                if (modal) {
                    modal.hide();
                }
                
                // 显示成功消息
                if (typeof showAlert === 'function') {
                    showAlert('success', '模板创建成功！');
                } else {
                    // 如果showAlert不可用，使用Bootstrap的toast
                    const toastHtml = `
                        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header bg-success text-white">
                                    <strong class="me-auto">成功</strong>
                                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    模板创建成功！
                                </div>
                            </div>
                        </div>
                    `;
                    $('body').append(toastHtml);
                    
                    // 5秒后自动移除toast
                    setTimeout(() => {
                        $('.toast').remove();
                    }, 5000);
                }
                
                // 重置表单
                form[0].reset();
                
                // 如果是在模板列表页面，刷新页面以更新模板列表
                if (window.location.pathname.endsWith('/label-templates/')) {
                    window.location.reload();
                    return;
                }
                
                // 如果是在设计器页面，重定向到模板列表页面
                if (window.location.pathname.endsWith('/label-templates/designer/')) {
                    window.location.href = '/label-templates/';
                    return;
                }
                
                // 默认重新加载当前页面
                window.location.reload();
            },
            error: function(xhr) {
                // 显示错误信息
                const errors = xhr.responseJSON || {};
                let errorHtml = '<ul class="mb-0">';
                
                if (errors.non_field_errors) {
                    errors.non_field_errors.forEach(function(error) {
                        errorHtml += `<li>${error}</li>`;
                    });
                } else {
                    for (const field in errors) {
                        errors[field].forEach(function(error) {
                            errorHtml += `<li>${field}: ${error}</li>`;
                        });
                    }
                }
                
                errorHtml += '</ul>';
                const $errorContainer = $('#templateFormErrors');
                $errorContainer.html(errorHtml).show();
                
                // 滚动到错误信息
                $('html, body').animate({
                    scrollTop: $errorContainer.offset().top - 20
                }, 500);
            },
            complete: function() {
                submitBtn.html(originalBtnText);
                submitBtn.prop('disabled', false);
            }
        });
    });
});
